<template>
  <!-- 基础信息 -->
  <vab-card>
    <template #header>
      <span class="leve2_title">基础信息</span>
    </template>
    <template #default>
      <el-form
        :ref="(el) => (baseFormRef = el)"
        :model="baseForm"
        label-width="110px"
      >
        <el-row :gutter="24">
          <el-col v-for="(item, i) in CreateBaseForm" :key="i" v-bind="colLay">
            <!-- 默认项 -->
            <el-form-item
              v-if="item.type == 'select'"
              :label="item.label"
              :prop="item.prop"
              :rules="[
                {
                  required: true,
                  message: `${item.label}不能为空！`,
                  trigger: 'blur',
                },
              ]"
            >
              <VabSelectForm
                :options="selectOptions(item.prop)"
                class="width_100"
                placeholder="请选择"
                v-model="baseForm[item.prop]"
                :multiple="item.multiple"
                :disabled="item.disabled"
                @change="(value: string) => {
                  if (item.prop != 'use_org_id') return
                  handleSwitchOrg(value)
                }"
              />
            </el-form-item>
            <el-form-item
              v-if="item.type == 'orgSelect'"
              :label="item.label"
              :prop="item.prop"
              :rules="[
                {
                  required: true,
                  message: `${item.label}不能为空！`,
                  trigger: 'blur',
                },
              ]"
            >
              <VabSelectForm
                ref="vabSelectFormRef"
                :options="selectOptions(item.prop)"
                class="width_100"
                placeholder="请选择"
                v-model="baseForm[item.prop]"
                :multiple="item.multiple"
                :disabled="item.disabled"
                @change="handleSwitchOrg"
              />
            </el-form-item>
            
            <el-form-item
              v-if="item.type == 'input'"
              :label="item.label"
              :prop="item.prop"
              :rules="[
                {
                  required: true,
                  message: `${item.label}不能为空！`,
                  trigger: 'blur',
                },
              ]"
            >
              <VabInputForm
                placeholder="请输入"
                v-model="baseForm[item.prop]"
                :disabled="item.disabled"
              />
            </el-form-item>
            <el-form-item
              v-if="item.type == 'time'"
              :label="item.label"
              :prop="item.prop"
              :rules="[
                {
                  required: true,
                  message: `${item.label}不能为空！`,
                  trigger: 'blur',
                },
              ]"
            >
              <VabTimeForm
                placeholder="请选择"
                v-model="baseForm[item.prop]"
                :disabled="item.disabled"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </vab-card>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CreateInfo',
})
/**
 * @props
 */
const props = defineProps({
  isWarn: {
    type: Boolean,
    default: false,
  },
  fromPage: {
    type: String,
    default: '',
  },
})
/**
 * @import
 */
import _ from 'lodash'
import { ref } from 'vue'
import { CreateBaseForm, ReturnSelectOptions } from './tools'
import { ElMessageBox } from 'element-plus'
/**
 * @var
 */
const colLay = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 8,
  xl: 8,
}

const proxy: any = getCurrentInstance()?.proxy
const baseFormRef = ref<any>(null)
const vabSelectFormRef = ref<any>()

let baseForm = ref<any>({
  compositeValue: '',
  type: '1',
})

const checkUseOrgID = ref<any>('')
const sreachScreen = ref<any>(null)

/**
 * @method
 */

const productFormRef = ref()
// 基础五个数据
const customerList = ref<any>([{ is_default: '1' }])

/**
 * @method
 */

const emit = defineEmits(['useOrgSelect'])

// 切换信用对象范围
const handleComposite = () => {
  // 清空原数据
  baseForm.value.customer = ''
  baseForm.value.cust_type_id = ''
  baseForm.value.primary_group = ''
}

// 重置数据
const resetData = (value: any) => {
  customerList.value = [{ is_default: '1' }]
}
// 筛选项返回值
const selectOptions = (value: string) => {
  if (!sreachScreen.value) return
  if (!value) return
  return ReturnSelectOptions(sreachScreen.value, value)
}
// 切换使用组织
const handleSwitchOrg = (value: string) => {

  const selectRef = vabSelectFormRef.value[0].selectRef

  if (checkUseOrgID.value && checkUseOrgID.value != value) {
    ElMessageBox.confirm(
      '切换使用组织，会清空【适用范围】和【规则详情】，请谨慎操作，是否确认',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        // 清除焦点
        selectRef.$refs.reference.blur()
        // 赋值
        baseForm.value.use_org_id = value
        // 判断key
        checkUseOrgID.value = value
        // 清空
        customerList.value = [{}]
        // 清空适用范围筛选项
        baseForm.value.compositeValue = ''
        handleComposite()
        // 规则范围清空
        emit('useOrgSelect', baseForm.value.use_org_id, true)
      })
      .catch(() => {
        selectRef.$refs.reference.blur()
        baseForm.value.use_org_id = checkUseOrgID.value
        emit('useOrgSelect', baseForm.value.use_org_id, false)
      })
  } else {
    checkUseOrgID.value = value
    emit('useOrgSelect', baseForm.value.use_org_id, false)
  }


}

// 获取更新数据
const getUpdateData = async (res: any) => {




  const { info, customer_list } = res
  const { name, number, level, is_enable, type, effective_end, effective_start, uid, use_org_id } = info

  // 基本信息
  baseForm.value = {
    uid,
    name,
    number,
    is_enable,
    use_org_id,
    type: `${type}`,
    level: `${level}`,
    effective_date: [effective_start, effective_end],
  }

  customerList.value = customer_list.map((item: any) => {
    const { customer_name, customer_number, customer_uid, is_default } = item
    return {
      is_default: `${is_default}`,
      customer_uid,
      customer_number,
      customer_name,
    }
  })
}

// 重置数据
const getResetData = () => {
  baseForm.value = { type: '1' }
  customerList.value = [{ is_default: '1' }]
}

/**
 * @实例
 */

onMounted(() => {
  sreachScreen.value = {}
})

//抛出数据
defineExpose({
  baseFormRef,
  baseForm,
  productFormRef,
  customerList,
  resetData,
  getUpdateData,
  getResetData,
})

</script>

<style lang="scss" scoped>
@import '../../../../components/public.scss';
@import url(./give.scss);
</style>
